<template>
	<div>
		<el-steps direction="vertical" :active="activeNum">
			<el-step>
				<template #title>
					<div class="text-#86909C text-18px font-400">
						<!-- title -->
						<div :class="{
							'text-#000000': !(activeNum < 1),
						}">{{ props.one }}</div>
					</div>
				</template>
				<template #description>
					<div class="text-#000000 text-14px mt-10px mb-40px">
						<slot name="one"></slot>
					</div>
				</template>
			</el-step>
			<el-step>
				<template #title>
					<div  class="text-#86909C text-18px font-400">
						<!-- title -->
						<div :class="{
							'text-#000000': !(activeNum < 2),
						}">{{ props.two }}</div>
					</div>
				</template>
				<template #description>
					<div class="text-#000000 text-14px mt-10px mb-40px">
						<div v-if="!(activeNum < 2)">
							<slot name="two"></slot>
						</div>
					</div>
				</template>
			</el-step>
			<el-step >
				<template #title>
					<div  class="text-#86909C text-18px font-400">
						<!-- title -->
						<div :class="{
							'text-#000000': !(activeNum < 3),
						}">{{ props.three }}</div>
					</div>
				</template>
				<template #description>
					<div class="text-#000000 text-14px mt-10px mb-40px">
						<div v-if="!(activeNum < 3)">
							<slot name="three"></slot>
						</div>
					</div>
				</template>
			</el-step>
		</el-steps>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface IProps {
	one:string;
	two:string;
	three:string;
}
const activeNum = ref<any>(3);
const props = defineProps<IProps>();
</script>
<style lang="scss" scoped>
::v-deep .el-step__line{
	border-left:2px dashed #000000;
	background-color: #a8abb200;
}
::v-deep .el-step__icon{
	top: -2px;
} 
::v-deep .el-step__icon-inner{
	color: #fff;
	border-color: #86909C;
	color: #86909C;
}
::v-deep .is-finish .el-step__icon{
	background: #000000;
	border-color: #000000 !important;
}
::v-deep .is-finish .el-step__icon-inner {
		color: #ffffff ;
	}

::v-deep .is-finish .el-step__line{
	background-color: #a8abb200;
}
::v-deep .is-finish .el-step__line-inner{
	display: none;
}
::v-deep .is-vertical .el-step__icon{
	border-color: #86909C;
}
</style>
<style lang="scss">
	
</style>
